<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>瀑布流</title>
</head>
<body>
<div class="container">
  <div class="col">
    <div class="item">
      <img src="../images/flexbg.jpeg" alt="" /></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/flexdem.webp"alt="" /></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-6kxgw6.jpeg" alt="" /></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-3kzgp3.png" alt="" /></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/flexbg.jpeg" alt="" /></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-8xz8vj.jpeg" alt="" /></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/flexbg.jpeg" alt="" /></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-9m23jw.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/flexbg.jpeg" alt=""/></div>
  </div>

  <div class="col">
    <div class="item">
      <img src="../images/flexbg.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-y8xqvx.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-kwrwl1.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-3kzgp3.png" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-6kxgw6.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-8xz8vj.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-kwrwl1.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-y8xqvx.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/flexbg.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-9m23jw.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/flexdem.webp" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-y8xqvx.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/flexdem.webp" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-y8xqvx.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/flexdem.webp" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-y8xqvx.jpeg" alt=""/></div>
  </div>
  <div class="col">
    <div class="item">
      <img src="../images/wallhaven-9m23jw.jpeg" alt=""/></div>
  </div>
</div>
</body>
<style>
  body {
    margin: 0;
    background-color: #eeeeee;

  }

  .container {
    width: 67VW;
    background-color: #ffffff;
    /*height: 100VH;*/
    margin: 0 auto;
    column-count: 5;
    column-gap: 0;
    padding: 0 0 0 30px;
    min-width: 1024px;

  }

  .col {
    width: calc(67vw / 3);
    break-inside: avoid;
    /*margin-left: 50px;*/

  }
  .item {
    display: flex;
    width: calc(67vw / 3);
    flex-direction: column;
    justify-content: space-around;
    padding: 5px 0;
  }

  .item img {
    object-fit: cover;
    width: 200px;
    border-radius: 2px;
  }
  .item img:hover {
    -moz-box-shadow: 0 0 9px #949494;
    -webkit-box-shadow: 0 0 9px #949494;
    box-shadow: 0 0 9px #949494;
    transition: 0.5s;
    /*border-radius: 2px;*/
  }
  .item img:after {
    content: '';
    width: 1920px;
    height: 1080px;
    background-color: #949494;

  }

</style>
</html>